

import React, { useEffect, useState } from 'react'
import { Button, Space, Table } from 'antd'
import { t } from '@lingui/macro'

// 批量表格
const BatchTable = (props) => {
  const {columns, batchButtons, ...tableProps} = props;

  const [selectedRowKeys, setSelectedRowKeys] = useState([])

  useEffect(() => {
    setSelectedRowKeys([])
  }, [tableProps?.dataSource])

  const hasSelected = selectedRowKeys.length > 0
  const rowSelection = {
    selectedRowKeys: selectedRowKeys,
    onChange: (newSelectedRowKeys) => {
      setSelectedRowKeys(newSelectedRowKeys)
    }
  }
  return <>
    {tableProps.dataSource.length > 0 && <div style={{ marginBottom: 16 }}>
      <Space>
        {batchButtons && batchButtons({selectedRowKeys})}
      </Space>

      <span style={{ marginLeft: 8 }}>
            {hasSelected ? t`Selected ` + selectedRowKeys.length + t` Items` : ''}
            {/*{hasSelected ? t({}) : ''}*/}
          </span>
    </div>}
    <Table
      {...tableProps}
      pagination={{
        ...tableProps?.pagination,
        showTotal: (total) => {
          return t`Total ` + total + t` Items`
        },
        rowSelection: true,
      }}
      bordered
      scroll={{ x: 1200 }}
      columns={columns}
      // simple
      rowKey={record => record.id}
      rowSelection={rowSelection}
    />
    {tableProps.dataSource.length > 0 && <div style={{ marginBottom: 16 }}>
      <Space>
        {batchButtons && batchButtons({selectedRowKeys})}
      </Space>
    </div>}

  </>
}

export default BatchTable
